<template>
  <el-container>
    <el-main class="rightMain">
      <bs-main>
        <list
          ref="list"
          class="center"
          height="calc(100vh - 220px)"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
          @sort="handleSort"
          @selection-change="handleSelectionChange"
          @filter="handleFilter"
        >
        <template slot="typeSlot" slot-scope="{ row }">
            {{ row.type | typeFilter(te) }}
          </template>
        </list>
        <pagination slot="footer" :total="pageData.total" :page="pageData.page" :limit="pageData.limit" :showAllChecked="false" :allChecked="false" @all="handleChangeAllSize" @pagination="doList"></pagination>
      </bs-main>
      <set-screen-dialog></set-screen-dialog>
    </el-main>

  </el-container>
</template>

<script>
import SetScreenDialog from './components/SetScreenDialog'
import List from '@/components/List'
import Pagination from '@/components/Pagination'
import ScreenApi from '@/api/screen'
import { deepClone } from '@/utils/index'

export default {
  data() {
    const headerContextMenus = {
      width: '120px',
      items: [
        'sortUp',
        'sortDown',
        'line',
        'cols'
      ]
    }
    return {
      queryData: {
        queryType: 0
      },
      editorForm: {},
      selectedArr: [],
      tableData: [],
      actionOpts: {
        show: false
      },
      colData: [
        { label: '屏幕名称',  prop:'name', minwidth: 200, headerContextMenus },
        { label: '宽',  prop:'width', minwidth: 150, headerContextMenus },
        { label: '高',  prop:'height', minwidth: 150, headerContextMenus },
        { label: '屏幕类型',  prop:'type', minwidth: 150, headerContextMenus,slot: true },
        { label: '厂家信息', prop:'manufactor', headerContextMenus, minwidth: 150 }
      ],
      initColsProps: ['name', 'width', 'height','type', 'manufactor'],
      pageData: {
        page: 1,
        total: 0,
        limit: 15
      },
      initHeadmuneFlag: false,
      tableName:'setScreenTableList',
      allSize: false
    }
  },
  filters:{
    typeFilter(val,te){
      if (val == 1) {
        return te('新闻屏')
      } else if(val == 2) {
        return te('广告屏')
      }
    }
  },
  created() {
    this.$eventBus.$on('doList', this.doList)
  },
  beforeDestroy() {
    this.$eventBus.$off('doList')
  },
  components: {
      List,
      Pagination,
      SetScreenDialog,
  },
  mounted: function () {
    this.$nextTick(function () {
      this.doList()
    })
  },
  methods: {
    te(arg) {
      const hasKey = this.$te(arg)
      if (hasKey) {
        const result = this.$t(arg)
        return result
      }
      return arg
    },
    initTable(config){
      this.initHeadmuneFlag = true
    },
    // 列表选择回调
    handleSelectionChange(val) {
      this.selectedArr = []
      for (let i = 0; i < val.length; i++) {
          this.selectedArr.push(val[i].id)
      }
    },
    // 排序
    handleSort(sortInfo) {
      switch(sortInfo.prop) {
        case 'name':
          this.queryData.orderType = 1
          break;
        case 'width':
          this.queryData.orderType = 2
          break;
        case 'height':
          this.queryData.orderType = 3
          break;
        case 'manufactor':
          this.queryData.orderType = 4
          break;
      }
      this.queryData.orderParam = sortInfo.type
      this.doList({page: 1})
    },
    // 查询列表
    async doList(current) {
      if(current) {
        this.pageData = {
          ...this.pageData,
          ...current
        }
      }
      this.allSize = false
      var queryData = this.$data.queryData
      queryData.current = this.pageData.page
      queryData.size = this.pageData.limit
      const res = await ScreenApi.queryList(queryData)
      if(res) {
        this.tableData = res.records ? res.records : []
        this.pageData.total = Number(res.total? res.total: 0)
      }
    },
    getActiveItem() {
      let items = this.$refs.list.getActiveItem()
      return items.length === 1 ? items[0] : items.length === 0 ? null : items
    },
    doEdit() {
      const param = this.getActiveItem()
      if (!param) {
        this.$alert('提示', '请先选择对应的屏幕')
        return
      }
      if(param.length > 1) {
        this.$alert('提示', '只能选择一条记录')
        return
      }
      this.$eventBus.$emit('addScreenDialogShow', deepClone(param))
    },
    doAdd() {
       this.$eventBus.$emit('addScreenDialogShow', { rotate: 0, useDefault : 0 })
    },
    handleFilter(filterInfo) {
      console.log('filterInfo----', filterInfo)
    },
    //删除
    async doDelete() {
      if(!this.allSize) {
        const rows = this.getActiveItem()
        if (!rows) {
          this.$alert('提示', '请先选择对应的屏幕')
          return
        }
        if(this.selectedArr.length === 0) {
          this.$alert('提示', '请先选择对应的屏幕')
          return
        }
        let isUsed = false
        if(rows.length > 1) {
          rows.forEach(item => {
            console.log(item.hasUsed)
            if(item.hasUsed) {
              isUsed = true
              return
            }
          })
        } else {
          if(rows.hasUsed) {
            isUsed = true
          }
        }
        if(isUsed) {
          this.$alert('提示', '屏幕被使用,不允许删除')
          return
        }
      }
      let params = this.allSize ? {
        ids: this.selectedArr,
        ...this.queryData,
        allSize: this.allSize
      } : {
        ids: this.selectedArr
      }
      const confirm = await this.$confirm('提示', '确定删除该屏幕？', 'info')
      if(confirm) {
        const res = await ScreenApi.deleteScreen(params)
        if(res){
          this.doList({page: 1})
          this.$success('del')
        }
      }
    },
    // 选择所有页
    handleChangeAllSize(val) {
      this.allSize = val
      this.$refs.list.clearSelection();
      this.selectedArr = []
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  margin-top: 15px;
}
</style>
